<template>
  <div class="DrugstoreDesktop-container">
    <div class="title">
      <span class="drugstore-title">门诊药房</span><span>{{drugstoreId}}号窗口</span>
    </div>
    <el-row class="row-wrapper">
      <el-col :span="12" class="medication-collect-wrapper">
        <div class="medication-collection-title">请取药</div>
        <div class="medicated-patient-list-wrapper">
          <vue-seamless-scroll :class-option="classOption" :data="medicatedPatientList" class="medicated-patient-list-ul-scroll">
            <ul class="medicated-patient-list-ul">
              <li v-for="item in medicatedPatientList">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </el-col>
      <el-col :span="12" class="wait-wrapper">
        <div class="wait-title">等待取药</div>
        <div class="wait-patient-list-wrapper">
          <vue-seamless-scroll :class-option="classOption" :data="waitPatientList" class="wait-patient-list-ul-scroll">
            <ul class="wait-patient-list-ul">
              <li v-for="item in waitPatientList">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import patientApi from "@/api/patient";
export default {
  name: "DrugstoreDesktopIndex",
  data() {
    return {
      classOption:{
        step:0.2,
        hoverStop:false
      },
      socket:null,
      drugstoreId:null,
      medicatedPatientList:[],
      waitPatientList:[]
    }
  },
  computed: {},
  mounted() {
    this.getPatientList()
  },
  created() {
    this.drugstoreId = this.$route.query.drugstoreId
    this.drugstoreId = parseInt(this.drugstoreId)
    this.init()
  },
  methods: {
    init() {
      //与服务端建立连接
      this.socket = new WebSocket(`ws://localhost:8080/ws/drugstoreNotify/${this.drugstoreId}`)
      this.socket.onmessage = this.websocketonmessage;
      this.socket.onopen = this.websocketonopen;
      this.socket.onerror = this.websocketonerror;
      this.socket.onclose = this.websocketclose;
    },
  websocketonmessage(e){
    const msg = JSON.parse(e.data)
    console.log(msg)
    switch (msg.action){
      case 'notifyDrugstoreDesktopUpdatePatList':{
        this.getPatientList()
        return
      }
      default:return
    }
  },
  websocketonopen(){

  },
  websocketonerror(e){

  },
  websocketclose(e){

  },
    async getPatientList(){
      const{data:res} = await patientApi.findMedicatedPatientList(this.drugstoreId);
      this.medicatedPatientList = res.data

      const{data:resp} = await patientApi.findWaitPatientList(this.drugstoreId);
      this.waitPatientList = resp.data
    },
  }
}
</script>

<style lang="less" scoped>
.DrugstoreDesktop-container{
  .title{
    background-color: #4fc748;
    font-size: 100px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 5px solid black;
    .drugstore-title:after{
      content: "      ";
      white-space: pre;
    }
  }
  .row-wrapper{
    .medication-collect-wrapper{
      border-right: 5px solid black;
      .medication-collection-title{
        border-bottom: 5px solid black;
        box-sizing: border-box;
        background-color: #6db4fb;
        font-size: 70px;
        text-align: center;
      }
      .medicated-patient-list-wrapper{
        background-color: #999999;
        font-size: 50px;
        .medicated-patient-list-ul-scroll{
          overflow: hidden;
          height: 661px;
          .medicated-patient-list-ul{
            list-style: none;
            text-align: center;
          }
        }
      }
    }
    .wait-wrapper{
      .wait-title{
        border-bottom: 5px solid black;
        background-color: #6db4fb;
        font-size: 70px;
        text-align: center;
      }
      .wait-patient-list-wrapper{
        background-color: #999999;
        font-size: 50px;
        .wait-patient-list-ul-scroll{
          overflow: hidden;
          height: 661px;
          .wait-patient-list-ul{
            list-style: none;
            text-align: center;
          }
        }
      }
  }

  }


}
</style>